@import 'nib'
@import './button'

WHITE = rgb(255, 255, 255)

GRAY_HIGHLIGHT = rgb(240, 240, 240)
GRAY_LIGHTEST = rgb(220, 220, 220)
GRAY_LIGHT = rgb(200, 200, 200)
GRAY = rgb(100, 100, 100)
BLACK = rgb(30, 30, 30)

BLUE_DARKEST = rgb(17, 74, 86)
BLUE_DARK = rgb(1, 82, 99)
BLUE = rgb(0, 158, 179)
BLUE_LIGHT = rgb(208, 255, 255)

RED_LIGHT = rgb(232, 74, 62)
RED = rgb(180, 35, 8)

HIGHLIGHT = rgb(250, 250, 220)

SCROLLBAR_TRACK = transparent
SCROLLBAR_THUMB_DARKEN  = rgba(0,0,0,0.175)
SCROLLBAR_THUMB_LIGHTEN = rgba(255,255,255,0.175)

SIDEBAR_WIDTH = 190px
FRIENDS_LOGO_HEIGHT = 70px
SIDEBAR_BOTTOM_HEIGHT = 61px

AVATAR_SIZE = 35px
AVATAR_SIZE_SMALL = 18px

BORDER_RADIUS = 5px

FONT_SIZE_BIG = 20px
FONT_SIZE = 15px
FONT_SIZE_SMALL = 12px

TOP_BAR_HEIGHT = 45px

SPACING_SIZE = 10px

ellipsis()
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.clearfix:before, .clearfix:after
  content: ''
  display: table

.clearfix:after
  clear: both

*, *:after, *:before
  box-sizing: border-box

html, body
  margin: 0
  padding: 0
  height: 100%
  overflow: hidden

h1, h2, h3, h4, h5, h6
  margin: 0.1em 0
h1
  font-size: 1.5em
h2
  font-size: 1.3em
h3
  font-size: 1.1em
h4
  font-size: 0.9em
h5
  font-size: 0.7em
h6
  font-size: 0.5em
ul
  -webkit-padding-start: 20px

body
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  font-size: FONT_SIZE

textarea, input, button
  outline: none

button
  background: transparent
  border: none
  font-size: 1em

.sidebar
  position: absolute
  left: 0
  top: 0
  bottom: 0
  width: SIDEBAR_WIDTH
  height: 100%
  color: GRAY_LIGHTEST
  background: BLUE_DARK top left url('../../static/logo.png') no-repeat
  background-size: SIDEBAR_WIDTH
  padding-top: FRIENDS_LOGO_HEIGHT
  padding-bottom: SIDEBAR_BOTTOM_HEIGHT
  user-select: none
  cursor: default
  text-shadow: 0 1px 2px rgba(BLACK, 0.6)

  .sidebar-scroll
    overflow: auto
    height: 100%
    padding: 0 SPACING_SIZE 4em SPACING_SIZE

  .heading
    font-size: FONT_SIZE_SMALL
    margin-top: (SPACING_SIZE * 2)
    margin-bottom: SPACING_SIZE
    text-transform: uppercase
    font-weight: bold
    letter-spacing: 0.5px

  button
    ellipsis()
    color: GRAY_LIGHTEST
    text-decoration: none
    padding: (SPACING_SIZE / 3) (SPACING_SIZE * 2)
    margin: 0
    display: block
    width: 100%
    text-align: left

    &:hover
      color: GRAY_HIGHLIGHT

  .add-channel
    margin: 0 (-1 * SPACING_SIZE)
    button
      padding: (SPACING_SIZE / 2) (SPACING_SIZE * 2)
    .inputprompt
      margin: 0 (SPACING_SIZE * 2)
      input
        padding: (SPACING_SIZE / 3) SPACING_SIZE
        font-size: FONT_SIZE
        width: 100%
        z-index: 10000

  ul
    list-style: none
    margin: 0
    padding: 0

  li
    ellipsis()
    margin: 0
    padding: 0
    margin: 0 (-1 * SPACING_SIZE)

    &.active
      background-color: RED_LIGHT
      button
        color: WHITE

  .avatar
    float: left
    border-radius: (BORDER_RADIUS / 2)
    width: AVATAR_SIZE_SMALL
    height: AVATAR_SIZE_SMALL
    margin-right: (SPACING_SIZE * (2 / 3))
    opacity: 0.8

  .status
    background-color: BLUE_DARKEST
    text-align: center
    position: absolute
    padding: SPACING_SIZE 0
    bottom: 0
    left: 0
    right: 0

    .username, .peers
      ellipsis()
    .peers
      margin-top: SPACING_SIZE
      font-style: italic
      font-size: FONT_SIZE_SMALL

  .users .blocked
    opacity: 0.5

.content
  position: absolute
  right: 0
  top: 0
  bottom: 0
  left: SIDEBAR_WIDTH

.messages-container
  height: 100%

.top-bar
  background-color: WHITE
  box-shadow: 0 0 7px 0 GRAY_LIGHT
  padding: SPACING_SIZE
  height: TOP_BAR_HEIGHT

  .channel-name
    display: inline-block
    color: BLACK
    font-size: FONT_SIZE_BIG
    font-weight: bold

    .num-peers
      font-size: FONT_SIZE_SMALL
      font-weight: normal
      color: GRAY_LIGHT

  .button
    float: right
    margin-top: -3px

.messages
  overflow-y: auto
  margin: 0
  height: calc(100% - 45px)
  padding: 0
  margin-bottom: TOP_BAR_HEIGHT

  li
    list-style: none

.message
  margin: SPACING_SIZE
  a
    color: #0084B4
  .avatar
    float: left
    border-radius: BORDER_RADIUS
    width: AVATAR_SIZE
    height: AVATAR_SIZE
    cursor: pointer
  .username, .verified, .timestamp
    line-height: 1
  .username
    font-weight: bold
    margin-left: SPACING_SIZE
    text-decoration: none
    color: inherit
  .verified
    display: inline-block
    background-image: url('../../static/verified.svg')
    background-size: 10px
    width: 10px
    height: 10px
    opacity: 0.8
  .timestamp
    color: GRAY_LIGHT
    font-size: FONT_SIZE_SMALL
  .text
    margin-left: AVATAR_SIZE + SPACING_SIZE
    overflow-wrap: break-word
  .highlight
    background-color: HIGHLIGHT
    padding-left: 4px
    margin-left: -4px
    margin-right: (-1 * SPACING_SIZE)
  p
    margin: 4px 0
  img
    max-width: 100%
  pre
    margin: 0

.starterMessage
  color: GRAY
  font-style: italic
  font-size: FONT_SIZE_BIG
  text-align: center
  margin: (SPACING_SIZE * 3) SPACING_SIZE SPACING_SIZE SPACING_SIZE

input, textarea
  outline: 0

textarea.composer
  border-radius: BORDER_RADIUS
  border: solid 3px GRAY_LIGHT
  bottom: 0
  box-shadow: 0 0 0 2px WHITE
  box-sizing: padding-box
  display: block
  font-size: FONT_SIZE
  margin: SPACING_SIZE
  overflow: hidden
  padding: SPACING_SIZE
  position: absolute
  width: calc(100% - 25px)
  resize: none

img.emoji
  height: 1.2em
  width: 1.2em
  margin: 0 .05em 0 .1em
  vertical-align: -0.1em

.modal-overlay
  background-color: rgba(0,0,0,.001)
  width: 100%
  height: 100%
  position: fixed
  top: 0
  left: 0
  z-index: 9999
  .modal
    position: absolute
    top: 50%
    left: 50%
    z-index: 9998
    background-color: WHITE
    border-radius: 3px
    padding: .5em
    color: BLACK
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12)
    margin-top: 10px
    ul
      margin: 0
      padding: 0
    li
      list-style: none
      a,button
        width: 100%
        display: block
        text-decoration: none
        color: BLACK
        background: none
        border: none
        text-align: left
        padding: .3em
        cursor: pointer
        &:hover
          background-color: GRAY_LIGHTEST

::-webkit-scrollbar
  width: 10px

::-webkit-scrollbar-track
  background-color: SCROLLBAR_TRACK
  border-radius: 8px

::-webkit-scrollbar-thumb
  background-color: SCROLLBAR_THUMB_DARKEN
  border-radius: 8px

.sidebar
  ::-webkit-scrollbar-thumb
    background-color: SCROLLBAR_THUMB_LIGHTEN
    border-radius: 8px
